 <template>
  <div class="page-demo-content">
    <!-- 顶部操作 -->
    <div class="top">
      <div class="left">
        <el-button type="primary" size="mini" @click="formHandle('add')">新增</el-button>
      </div>
      <div class="right">
        <el-button type="text" size="mini" icon="el-icon-refresh" @click="getList">刷新</el-button>
        <el-button type="text" size="mini" icon="el-icon-back" @click="back">返回</el-button>
      </div>
    </div>
    <!-- 表格体 -->
    <div class="demo-table">
      <el-table :data="tableData" v-loading="tableLoading">
        <el-table-column v-for="item in tableOption.column" :key="item.prop" :prop="item.prop" :label="item.label"></el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="120">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="formHandle('edit', scope.row)">编辑</el-button>
            <el-button type="text" size="mini" @click="formHandle('view', scope.row)">查看</el-button>
            <el-button type="text" size="mini" @click="delRow(scope.row)" style="color: #F56C6C;">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页器 -->
    <div class="tablepagination">
      <div class="left"></div>
      <el-pagination
        background
        :layout="page.layout"
        :total="page.total"
        :current-page="page.currentPage"
        :page-sizes="page.pageSizes"
        :page-size="page.pageSize"
        @size-change="getList"
        @current-change="getList"
      ></el-pagination>
    </div>
    <!-- 新增  修改  查看 -->
    <el-dialog
      :title="dialogType == 'add' ? '新增' : (dialogType == 'edit' ? '编辑' : '查看')"
      :visible.sync="dialogVisible"
      :before-close="handleClose">
      <div v-if="dialogVisible">
        <el-form ref="form" :model="rowData" label-width="80px">
          <el-form-item v-for="item in tableOption.column" :key="'form-item-'+item.prop" :label="item.label">
            <el-date-picker v-if="item.prop == 'date'" type="date" placeholder="选择日期" v-model="rowData[item.prop]" value-format="yyyy-MM-dd" size="mini" :disabled="dialogType == 'view'" style="width: 100%;"></el-date-picker>
            <el-input v-else v-model="rowData[item.prop]" size="mini" :disabled="dialogType == 'view'"></el-input>
          </el-form-item>
          <el-form-item v-if="dialogType != 'view'">
            <el-button type="primary" size="mini" :loading="subLoading" @click="onSubmit">提交</el-button>
            <el-button size="mini" @click="handleClose">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { ruleRun } from './api'
export default {
  data() {
    return {
      tableLoading: false,
      queryParams: {},
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20, // 每页显示多少条
        pageSizes: [20, 50, 100, 200, 500, 1000], // 分页大小
        layout: "total, sizes, prev, pager, next, jumper", // 分页工具
      },
      tableOption: {
        column: [
          {
            label: '日期',
            prop: 'date'
          },
          {
            label: '姓名',
            prop: 'name'
          },
          {
            label: '地址',
            prop: 'address'
          }
        ]
      },
      tableData: [],
      dialogType: '',
      dialogVisible: false,
      rowData: null,
      subLoading: false
    };
  },
  created () {
    this.getList()
  },
  methods: {
    getList () {
      let query={
        current: this.page.currentPage,
        size: this.page.pageSize
      }
      this.tableLoading = true
      this.tableData = []
      let temp = JSON.parse(JSON.stringify(this.queryParams))
      ruleRun(this.$route.query.jvsAppId, '7fc056034236e4d5dc04dd7198ceb53a', Object.assign(query, temp)).then(res => {
        if(res.data.code==0 && res.data.data) {
          this.page.total =  res.data.data.length
          this.page.currentPage = 1
          this.tableData = res.data.data
          this.tableLoading = false
        }
      })
    },
    back () {
      this.$router.push({ path: `/demo?jvsAppId=${this.$route.query.jvsAppId}` })
    },
    formHandle (type, row) {
      this.dialogType = type
      if(row) {
        this.rowData = JSON.parse(JSON.stringify(row))
      }else{
        this.rowData = {}
      }
      this.dialogVisible = true
    },
    onSubmit () {
      if(this.dialogType == 'add') {
        this.subLoading = true
        // ruleRun(this.$route.query.jvsAppId, '', this.rowData).then(res => {
        //   if(res.data.code == 0) {
        //     this.subLoading = false
        //     this.$notify({
        //       title: '提示',
        //       message: '新增成功',
        //       position: 'bottom-right',
        //       type: 'success'
        //     })
        //     this.getList()
        //     this.handleClose()
        //   }
        // })
      }
      if(this.dialogType == 'edit') {
        this.subLoading = true
        // ruleRun(this.$route.query.jvsAppId, '', this.rowData).then(res => {
        //   if(res.data.code == 0) {
        //     this.subLoading = false
        //     this.$notify({
        //       title: '提示',
        //       message: '编辑成功',
        //       position: 'bottom-right',
        //       type: 'success'
        //     })
        //     this.getList()
        //     this.handleClose()
        //   }
        // })
      }
    },
    handleClose () {
      this.dialogVisible = false
      this.rowData = null
      this.subLoading = false
    },
    delRow (row) {
      this.$confirm('确定删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // ruleRun(this.$route.query.jvsAppId, '', row).then(res => {
        //   if(res.data.code == 0) {
        //     this.subLoading = false
        //     this.$notify({
        //       title: '提示',
        //       message: '删除成功',
        //       position: 'bottom-right',
        //       type: 'success'
        //     })
        //     this.getList()
        //   }
        // })
      })
    }
  }
};
</script>
<style lang="scss">
  .page-demo-content{
    background-color: #fff;
    border-radius: 6px;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    .top{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px;
    }
    .demo-table{
      width: 100%;
      box-sizing: border-box;
      padding: 0 20px;
      .el-table{
        .el-table__body-wrapper{
          max-height: calc(100vh - 164px);
          overflow: hidden;
          overflow-y: auto;
        }
        .el-table__body-wrapper::-webkit-scrollbar{
          width: 4px;
          height: 4px;
        }
        .el-table__body-wrapper::-webkit-scrollbar-track {
          background: rgb(239, 239, 239);
          border-radius: 2px;
        }
        .el-table__body-wrapper::-webkit-scrollbar-thumb{
          background: #bfbfbf;
          border-radius: 10px;
        }
      }
    }
    .tablepagination{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 20px;
      background: #fff;
      position: relative;
      z-index: 3;
    }
  }
</style>